<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox, ElLoading} from "element-plus";
import {FusunPicApi} from "@/api/fusun/fusunPic/fusunPic";
import {useUserStore} from "@/stores/userStores";
import {isAuth} from "@/utils/auth.js";
import router from "../../../router";
import AddUpdate from "@/views/fusun/fusunPic/addUpdate.vue";
import {Avatar, Edit, Search, Refresh, Delete, Upload, Plus} from "@element-plus/icons-vue";
import Detail from "@/views/fusun/fusunPic/detail.vue";

// ------------------------- 表格数据--------------
const tableData = ref({
  loading: false,
});
const tableColumnList = [
  {
    label: "图片名称",
    prop: "title",
    minWidth: 200,
  },
  {
    label: "备注",
    prop: "remark",
    minWidth: 200,
  },
  {
    label: "source集合",
    prop: "fileSource",
    minWidth: 200,
  },
  {
    label: "",
    prop: "updateTime",
    minWidth: 200,
  },
  {
    label: "",
    prop: "updateUser",
    minWidth: 200,
  },
];

const form = ref({
  id: '', //主建uuid生成
  title: '', //图片名称
  remark: '', //备注
  fileSource: '', //source集合
  createTime: '', //${column.comment}
  updateTime: '', //${column.comment}
  createUser: '', //${column.comment}
  updateUser: '', //${column.comment}
});

const loading = ref(false);

const searchParam = ref({
  pageNum: 1,
  pageSize: 10,
});

function clearParam() {
  searchParam.value = {
    pageNo: 1,
    pageSize: 10,
  };
  loadData();
}

// pageSize
const handleSizeChange = (pageSize) => {
  searchParam.value.pageSize = pageSize;
  loadData();
};
// pageNum
const handleCurrentChange = (pageNum) => {
  searchParam.value.pageNum = pageNum;
  loadData();
};

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const detailDialog = ref(false);
// 选择的的ids
const selections = ref([]);
const addUpdateRef = ref("");
/**
 * 查看详情，无需跳转
 * */
const openDetail = async (cow) => {
  // 详情 cow
  const res = await FusunPicApi.detail(cow.id);
  form.value = res.data;
  detailDialog.value = true;
};

/**
 * 查看详情，需要跳转
 * */
const gotoDetail = async (cow, title) => {
  dialogTitle.value = title;
  const res = await FusunPicApi.detail(cow.id);
  form.value = res.data;
  detailDialog.value = true;
  // router.push("/back/staffLensRecord/detail/" + cow.id);
};

/**
 * 打开编辑按钮
 */
function openEdit(cow) {
  addUpdateRef.value.openModal(cow, "编辑");
}

/**
 * 新增弹窗
 */
function openAdd() {
  addUpdateRef.value.openModal(null, "新增");
}

/**
 * 删除数据
 */
const deleteIds = async () => {
  // 先判断ids是否为空
  if (!selections.value.length) {
    // 如果不为空，就提示
    ElMessage.warning("请先选删除的数据!");

  } else {
    ElMessageBox.confirm("是否确认删除？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      let ids = selections.value.map((r) => r.id);
      await FusunPicApi.delete(ids);
      ElMessage.success("删除成功");
      loadData();
    });
  }
};

/**
 * 重置表单
 */
const resetForm = () => {
  addUpdateDialog.value = false;
  detailDialog.value = false;
  form.value = {};
};
/**
 * 处理选择框
 */
const handleSelectionChange = (list) => {
  selections.value = list;
};

/**
 * 加载数据
 */
function reload() {
  loadData();
}

const loadData = async () => {
  loading.value = true;
  const res = await FusunPicApi.page(searchParam.value);
  if (res) {
    loading.value = false;
    tableData.value = res.data;
  }
};
onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="main-box">
    <!------------------------------------------搜索行-------------------------------------------------------------------------->
    <div class="search-line">

      <span> 图片名称</span>
      <el-input v-model="searchParam.title"/>

      <span> 备注</span>
      <el-input v-model="searchParam.remark"/>

      <span> source集合</span>
      <el-input v-model="searchParam.fileSource"/>

      <span> </span>
      <el-input v-model="searchParam.updateTime"/>

      <span> </span>
      <el-input v-model="searchParam.updateUser"/>

      <el-button type="primary" size="small" :icon="Search" @click="loadData()">查询</el-button>
      <el-button size="small" :icon="Refresh" @click="clearParam()">重置</el-button>
    </div>
    <!------------------------------------------按钮行-------------------------------------------------------------------------->
    <div class="button-line">
      <el-button v-if="isAuth('email', 'add')" type="primary" size="small" plain :icon="Plus" @click.stop="openAdd">
        添加
      </el-button>
      <el-button v-if="isAuth('email', 'delete')" type="danger" size="small" plain :icon="Delete"
                 @click.stop="deleteIds"> 删除
      </el-button>
      <!--			<el-button v-if="isAuth('email', 'export')" type="success" size="small" plain :icon="Edit" @click.stop="addDialog = true">导出 </el-button>-->
    </div>
    <!------------------------------------------表格行-------------------------------------------------------------------------->
    <div class="border w-full">
      <el-table v-loading="loading" :data="tableData.list" style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40" fixed/>
        <template v-for="(column, index) in tableColumnList" :key="index">
          <el-table-column
              :type="column.type"
              :prop="column.prop"
              :label="column.label"
              :fixed="column.fixed || false"
              :sortable="column.sortable || false"
              :show-overflow-tooltip="column.overHidden || false"
              :width="column.width"
              :min-width="column.minWidth || '50px'"
              :align="column.align || 'center'"
              :formatter="column.formatter"
          >
          </el-table-column>
        </template>
        <!------------------------------------------操作行-------------------------------------------------------------------------->
        <el-table-column fixed="right" label="Operations" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="gotoDetail(scope.row)"> Detail</el-button>
            <el-button link type="primary" size="small" @click="openEdit(scope.row)">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!------------------------------------------分页-------------------------------------------------------------------------->
    <div class="pagination">
      <el-pagination
          v-model:current-page="tableData.pageNum"
          v-model:page-size="tableData.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :size="large"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
      <!------------------------------------------弹窗-------------------------------------------------------------------------->
    </div>
    <!--详情弹窗 -->
    <!--		<el-drawer v-model="detailDialog" :show-close="false" direction="ltr" size="50%">-->
    <!--			<Detail/>-->
    <!--		</el-drawer>-->
    <!-- 新增、修改弹窗 -->

    <AddUpdate ref="addUpdateRef" @loadData="loadData"/>
  </div>
</template>

<style lang="scss">
.example-showcase .el-loading-mask {
  z-index: 9;
}

.main-box {
  margin-left: 20px;
  margin-right: 20px;

  .search-line {
    height: 30px;
    display: flex;
    margin-bottom: 10px;
    text-align: center;
    line-height: 30px;

    span {
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      margin-left: 10px;
      margin-right: 10px;
    }

    .el-input {
      width: 140px;
      height: 26px;
    }

    .el-button {
      margin-left: 20px;
    }
  }

  .button-line {
    margin-bottom: 10px;
  }

  .pagination {
    margin: 15px auto;
    display: flex;
    justify-content: right;
  }
}
</style>


